<script setup lang="ts">
import CoinState from "@/views/home/component/CoinState/index.vue";
import { collect, isItem, keyType as kType, ResType } from "@/comm/BookMark";
import { computed, onMounted, reactive, ref, toRaw } from "vue";
import BookMarkImg from "@/components/j-svg/bookMarkImg.vue";
import JShare from "@/components/j-share/index.vue";
// import { ICoin } from "../../index.vue";
import { useTokens } from "@/stores/tokens";
import i18n from "@/locals";
import { useKline } from "@/stores/kline";
const token = useTokens();
const day = reactive({
    p: "#1",
    h: "$671.43B",
    l: "-0.27%",
    v: "-0.28%",
    n: "+0.54%"
});
const props = defineProps({
    coin: {
        type: Object,
        required: true
    }
});

const Desc = i18n.global.t("message.CionState.h");

const kline = useKline();
const item = ref();
const iconShow = ref(false);
function onColleCtion() {
    if (!item.value) return;
    collect(kType.CoinPairs, toRaw(item.value), (res: ResType) => {
        iconShow.value = isItem(kType.CoinPairs, item.value.id);
        // if (res !== ResType.NOTNULL) {
        // } else {

        // }
    });
}
onMounted(() => {
    setTimeout(() => {
        const item_ = kline.map.filter(item => item.symbol === props.coin.symbolPair)[0];
        if (!item_) return;
        item.value = toRaw(item_);
        iconShow.value = isItem(kType.CoinPairs, toRaw(item.value.id));
    }, 500);
});

interface Lang {
    description: string;
    language: string;
    whitePageUrl?: any;
}

const getDesc = computed(() => {
    let lang = localStorage.getItem("language") || "en";
    let map: any = { zh: "CN", en: "EN" };
    if (!props.coin?.details) return false;
    const details = toRaw(props.coin.details) as Lang[];
    const language = details.filter(item => item.language === map[lang])[0];
    const languagedef = details.filter(item => item.language === map['en'])[0];
    if (language !== undefined) {
        return language.description;
    } else if (languagedef !== undefined) {
        return languagedef.description;
    }
    return false;
});

</script>
<template>
    <div class="coin_state">
        <div class="d-flex">
            <div class="logo_title d-flex align-center">
                <img :src="token.getImg(coin.symbol)" />
                <!-- <p class="ml-3 c-title-2 c-bold">比特币 (BTC)</p> -->
                <p class="ml-3 c-title-2 c-bold">
                    {{ coin.symbol }}
                </p>
                <!-- <v-tooltip location="right">
                    <template v-slot:activator="{ props }">
                        <img class="ask ml-2" src="@/assets/ask.png" v-bind="props" />
                    </template>
                    <div class="more-t">{{ Desc }}</div>
                </v-tooltip> -->
                <v-tooltip location="right">
                    <template v-slot:activator="{ props }">
                        <img class="ask ml-2" src="@/assets/ask.png" v-bind="props" />
                    </template>
                    <div class="more-t" v-show="getDesc" v-html="getDesc"></div>
                </v-tooltip>
            </div>
            <div class="coin-table tab">
                <CoinState></CoinState>
            </div>
        </div>
        <div class="my-share d-flex">
            <VBtn color="#252A30" @click="() => onColleCtion()">
                <template v-slot:prepend>
                    <!-- <VIcon :class="iconShow ? 'y-active' : ''">mdi mdi-star</VIcon> -->
                    <BookMarkImg :class="iconShow ? 'y-active' : ''"></BookMarkImg>
                </template>
                <span class="c-title-5 tss">{{ $t("message.CionState.ff") }}</span>
            </VBtn>&nbsp;
            <!-- <JShare>
                <v-btn color="#252A30">
                    <template v-slot:prepend>
                        <span class="iconfont icon-2102fenxiang"></span>
                    </template>
                    <span class="c-title-5">{{ $t("message.CionState.g") }}</span>
                </v-btn>
            </JShare> -->
        </div>
    </div>
</template>
<style lang="less" scoped>
:deep(.coin-table) {
    border-left: none;
    margin: 0;

    .coin-state {
        padding: 0;

        .coin-type {
            display: none !important;
        }
    }
}

.more-t {
    width: 30vw !important;
}

.v-col {
    padding-inline: 0;
    margin-right: 40px;
}

.tss {
    color: #b1b6c6;
}

.coin_state {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding-bottom: 10px;
    margin: 20px 30px 0;
    // background: var(--card);
    position: relative;

    .ask {
        width: 15px !important;
        height: 15px !important;
    }

    .logo_title {
        display: flex;

        img {
            width: 40px;
            height: 40px;
        }
    }

    .tab {
        margin-left: 15px;
        // border-left: 1px solid #252930;
    }

    .my-share {
        position: absolute;
        right: 0;
        top: 4px;

        :deep(.svg) {
            transform: scale(0.8);

            #sc {
                fill: #b1b6c6;
            }
        }
    }

    .coin-table {
        .tip1 {
            font-size: 12px;
            color: #b1b6c6;
            white-space: nowrap;
        }

        .tip2 {
            font-size: 12px;
            color: #fff;
            margin-top: 4px;
            white-space: nowrap;
        }
    }
}

.y-active {
    :deep(#sc) {
        fill: var(--main) !important;
    }
}

.more-t {
    // text-wrap: nowrap;
    width: 300px;
    background: #000 !important;
}

:deep(.coin-state) {
    background: none;
    margin-left: 0 !important;
}
</style>
